<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-affix :offset="10">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">展开</el-radio-button>
            <el-radio-button :value="true">折叠</el-radio-button>
          </el-radio-group>
          <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @select="handleSelect">
            <el-menu-item index="/index">
              <el-icon>
                <House />
              </el-icon>
              <template #title>首页 </template>
            </el-menu-item>
            <el-menu-item index="/booklist">
              <el-icon>
                <Folder />
              </el-icon>
              <template #title>图书列表</template>
            </el-menu-item>
            <el-menu-item index="/booksales">
              <el-icon>
                <Reading />
              </el-icon>
              <template #title>图书售卖</template>
            </el-menu-item>
            <el-menu-item index="/help">
              <el-icon>
                <Warning />
              </el-icon>
              <template #title>帮助</template>
            </el-menu-item>
          </el-menu>
          <!-- 路由出口，用于显示当前路由对应的组件 -->
          <router-view></router-view>
        </el-affix>
      </el-aside>
      <el-container>
        <el-affix :offset="0">
          <el-header style="
              display: flex;
              align-items: center;
              height: 60px;
              border: 1px solid #f5f6fe;
            ">
            <!-- 添加 flex-grow: 1 使该 div 占据剩余空间 -->
            <div style="flex-grow: 1"></div>

            <router-link to="/cart" style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                padding-right: 20px;
                text-decoration: none; /* 去除默认下划线 */
                color: inherit; /* 继承父元素颜色 */
              ">
              <el-badge :value="bookStore.orderedBooksCount" :max="10" class="badge-item">
                <span class="icon-wrapper">
                  <el-icon style="font-size: 25px">
                    <ShoppingCart />
                  </el-icon>
                </span>
              </el-badge>
            </router-link>

            <div style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                padding-right: 20px;
                
              ">
              <span class="icon-wrapper">
                <el-icon style="font-size: 25px">
                  <Setting />
                </el-icon>
              </span>
            </div>

            <div style="padding-right: 20px">
              <el-popover placement="bottom" trigger="hover">
                <el-menu mode="vertical">
                  <el-menu-item index="1" @click="handleMenuItemClick(1)">个人中心</el-menu-item>
                  <el-menu-item index="2" @click="handleMenuItemClick(2)">关于我们</el-menu-item>
                  <el-menu-item index="3" @click="handleMenuItemClick_exit(3)">退出登录</el-menu-item>
                </el-menu>

                <template #reference>
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </template>
              </el-popover>
            </div>
          </el-header>
        </el-affix>
        <el-main>
          <h3 style="text-align: left">帮助中心</h3>

          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                <div class="text-left">
                  <h3>亲爱的用户，欢迎您！</h3>
                  <a href="#" class="green-link" @click.prevent="showDialog('新手指南')">新手指南</a>
                  <el-divider />

                  <a href="#" class="green-link" @click.prevent="showDialog('常见问题解答(FAQ)')">常见问题解答(FAQ)</a>
                  <el-divider />

                  <a href="#" class="green-link" @click.prevent="showDialog('详细教程')">详细教程</a>
                  <el-divider />

                  <a href="#" class="green-link" @click.prevent="showDialog('故障排除')">故障排除</a>
                  <el-divider />

                  <a href="#" class="green-link" @click.prevent="showDialog('专业支持')">专业支持</a>
                </div>
                <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%" :before-close="handleClose">
                  <div class="dialog-content">{{ dialogMessage }}</div>
                  <template #footer>
                    <span>
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                    </span>
                  </template>
                </el-dialog>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <el-footer style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
          ">
          <div>Designed with by XXX</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import { reactive } from "vue";
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import {
  Reading,
  House,
  Warning,
  Folder,
  Search,
  ArrowRight,
  CaretBottom,
  CaretTop,
  Top,
  Bottom,
  Close,
  Setting,
  ShoppingCart,
  Plus,
} from "@element-plus/icons-vue";
import type {
  TabsPaneContext,
  ElDialog,
  ElButton,
  ElDivider,
} from "element-plus";
import { useRouter } from "vue-router";
import {
  ElPopover,
  ElAvatar,
  ElMenu,
  ElMenuItem,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import dayjs from "dayjs";

import "../mock/iconfont.js";
import { useLogout } from "../composables/useLogout";
import { useBookStore } from '../stores/bookStore';

const router = useRouter();
const bookStore = useBookStore();

const dialogVisible = ref(false);
const dialogMessage = ref("");
const dialogTitle = ref("");

onMounted(() => {
  const userData = localStorage.getItem("userData");
  if (!userData) {
    // 如果没有获取到数据，跳转到登录页
    router.push("/login");
  }
});

// 定义书籍对象的类型
type Book = {
  author: string;
  bookName: string;
  bookNumber: string;
  saleTime: Date | null;
};

const isCollapse = ref(false);

// 创建一个响应式的布尔变量，初始值设为true，表示div初始是可见的
const isDivVisible = ref(true);

const handleSelect = (key: string) => {
  // 根据菜单项的 index 值切换页面

  router.push(key);
};

const handleMenuItemClick = (index: number) => {
  console.log(`你点击了选项 ${index}`);
};

const { isLoading, logout } = useLogout();
const handleMenuItemClick_exit = async (index: number) => {
  console.log(`你点击了选项 ${index}`);
  await logout();
};

// 定义 infoMap 的类型，使用索引签名
type InfoMapType = {
  [key: string]: string;
};

// 定义每个超链接对应的详细信息
const infoMap: InfoMapType = {
  新手指南: `这里是新手指南的详细信息。新手指南会帮助您快速了解我们的系统的基本操作和功能，让您能更快地上手使用。比如，如何注册账号、如何浏览主要页面等。`,
  "常见问题解答(FAQ)": `这是常见问题解答的内容。在这里您可以找到一些用户经常遇到的问题及其解决方案，例如登录问题、数据显示异常等。`,
  详细教程: `详细教程会为您提供系统各项功能的深入讲解。从基础的操作到高级的应用技巧，都会一一为您呈现，帮助您更好地利用系统的功能。`,
  故障排除: `当您遇到系统故障时，故障排除部分可以帮助您找到问题所在并解决。我们会列出常见的故障现象以及对应的解决办法。`,
  专业支持: `如果您在使用过程中遇到了复杂的问题，我们的专业支持团队随时为您服务。您可以通过电话、邮件等方式联系我们，我们会尽力为您解决问题。`,
};

const showDialog = (key: string) => {
  dialogTitle.value = key;
  dialogMessage.value = infoMap[key] || "未找到相关信息";
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  /* background-color: gray; */
  background-color: #fff;
}

.el-aside {
  background-color: #fff;
  /* background-color: pink; */
  border: 1px solid #f5f6fe;
}

.el-main {
  background-color: #f5f6fe;
  /* background-color: orange; */
}

.el-menu {
  border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 400px;
  background-color: #fff;
  padding: 20px;
}

/* 设置 h3 标题的上下外边距 */
.grid-content h3 {
  margin: 0 0 15px 0;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  text-align: left;
}

.p-vertically-center {
  display: flex;
  /* 使用 Flexbox 布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  height: 100%;
  /* 确保容器有高度 */
}

.p-vertically-center p {
  margin: 5px 40px;
  /* 为每个段落添加上下外边距 */
}

/* Vue 3 中使用 ::v-deep 穿透样式，将所有标签页标题文字加粗 */
::v-deep .el-tabs__item {
  font-weight: bold;
}

/* 确保弹出框有最小宽度 */
.el-popover {
  min-width: 120px;
  z-index: 1000;
  /* 确保弹出框显示在最上层 */
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.overflow-menu-icon {
  float: right;
  cursor: pointer;
  font-size: 20px;
}

.message-box-content {
  white-space: pre-line;
}

.text-left {
  text-align: left;
}

/* 定义超链接样式 */
.green-link {
  display: block;
  margin: 10px 0;
  color: green;
  text-decoration: none;
  /* 添加字体大小属性，这里设置为 18px，可以根据需求调整 */
  font-size: 18px;
}

/* 鼠标悬停时的样式 */
.green-link:hover {
  text-decoration: none;
}

/* 设置分割线的上下外边距 */
.grid-content .el-divider {
  margin: 15px 0;
  border-color: rgba(0, 0, 0, 0.1);
  /* 使用 rgba 设置淡颜色，这里透明度为 0.1 */
}

.badge-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>